import {StyleSheet, Dimensions} from 'react-native';
const screenWidth = Dimensions.get('window').width;
const screenHeight = Dimensions.get('window').height;

const styles = StyleSheet.create({
    headerPanel: {
        width: screenWidth,
        height: 15 + screenWidth * 375 / 750,
        borderBottomWidth: 1,
        borderColor: 'rgba(0,0,0,0)'
    },
    blockPanel: {
        width: screenWidth - 20,
        marginLeft: 10,
    },
    menuPanel:{
        backgroundColor: '#fff',marginTop: 10,
        borderRadius: 10
    },
    btnsPanel: {
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-around',
        alignItems: 'center',
        backgroundColor: '#fff',
        paddingTop: 10,
        paddingBottom: 10,
        borderRadius: 7,
        marginTop: 10
    },
    btnItem: {
        width: '25%',

    },
    btnText: {
        justifyContent: 'center',
        alignItems: 'center'
    },
    btnNum:{
        width: 16,
        height: 16,
        flexDirection:"row",
        alignItems: 'center',
        justifyContent: 'center',
        position: 'absolute',
        zIndex: 9,
        backgroundColor: '#FB3768',
        textAlign: 'center',
        borderRadius: 8,
        right: 18,
        top: 0,
    },
    topBgImage: {
        width: screenWidth, // 375 135
        height: screenWidth *  375 /  750,
        display: 'flex',
        justifyContent: 'flex-end'
    },
    msgBgImage:{
        height: screenWidth *  108 /  707,
        borderRadius: 5,
        padding: 5,
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center'
    },
    userImage:{
        height: (screenWidth *  108 /  707) - 10,
        width: (screenWidth *  108 /  707) - 10,
    },
    noBgImage: {
        width: 100,
        paddingLeft: 25,
        height: 20,
        color: '#fff',
        resizeMode: 'stretch',
        display: 'flex',
        justifyContent: 'center',
    },
    userInfoPanel: {
        marginBottom: -10,
    },
    locationPanel: {
        display: 'flex',
        flexDirection: 'row',
        marginBottom: 5
    },
    msgPanel: {
        borderRadius: 10
    },
    locationLabel: {
        marginLeft: 5,
        color: '#fff',
    },
    locationValue: {
        color: '#fff',
    },

    optionListItem: {
        height: 52,
        alignItems: 'center',
        flexDirection: 'row',
        justifyContent: 'space-between',
        borderBottomWidth: 1,
        borderBottomColor: '#ececec',
        paddingLeft: 10,
        paddingRight: 5
    },
    optionListItemLeft: {
        flexDirection: 'row',
        alignItems: 'center',
        width: 100
    },
    optionListItemLeftIcon: {
        width: 20,
        height: 25,
        marginTop: 2,
        marginRight: 10
    },
    optionListItemLeftLabel: {
        fontSize: 16,
        color: '#121212'
    },
    arrowIcon: {
        color: '#cfcece'
    },
})

export default styles
